﻿@inject Personalblog.Contrib.SiteMessage.Messages Messages

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="ZY知识库 继承画星星博客，这是一个用于分享知识和经验的平台，我会在这里分享一些我学习和工作中的经验和心得，希望能够对你有所帮助。">
    <meta name="keywords" content="ZY知识库,.net,.NET,.NET Core,C#,python,Python,Java,java web,知识分享,个人博客">
    <title>ZY知识库 · ZY - @ViewData["Title"]</title>
    <link rel="icon" href="~/images/logo2.gif"/>
    @*<link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />*@
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
    @* <link href="~/css/all.css" rel="stylesheet" /> *@
    @* <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@@fortawesome/fontawesome-free@5.15.3/css/all.min.css"> *@
    <link rel="stylesheet" href="/css/features.css">
    <link rel="stylesheet" href="/css/metro.css">
    <link rel="stylesheet" href="/css/footer.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.10.3/font/bootstrap-icons.css" rel="stylesheet">
    @* <link href="~/mp3/index.aed4c9e8.css" rel="stylesheet" /> *@
    <script src="/js/siteLoad.js"></script>
    <script src="/script/global-audio.js"></script>

    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    @await RenderSectionAsync("head", false)
    @*    <style type="text/css">
        body,html{
            filter:grayscale(100%);
            -webkit-filter:grayscale(100%);
        }
    </style>*@
    <style>
        .round-icon {
            border-radius: 50%;
            width: 66px;
            height: 66px;
            object-fit: cover;
        }

        .animated-icon {
            transition: transform 0.5s ease-in-out;
        }

            .animated-icon:hover {
                transform: scale(1.2) rotate(360deg);
            }

        .nav-link {
            text-decoration: none;
            color: white;
        }

            .nav-link:hover {
                text-decoration: none;
                color: white;
            }

        .bi {
            transition: transform 0.3s;
        }

        li:hover .bi {
            transform: translateY(-5px);
        }
        .bg-info-subtle {
          background-color: rgba(0, 123, 255, 0.1); /* 这是一个比bg-info更轻的颜色，您可以根据需要调整透明度 */
        }
        .bg-warning-subtle {
            background-color:#fff3cd;
        }
         .custom-alert {
                position: fixed;
                top: 0;
                left: 50%;
                transform: translateX(-50%);
                z-index: 1000;
                width: auto;
                margin-top: 20px;
                transition: opacity 0.3s ease-in-out;
              }
        @@media (max-width: 576px) {
            .custom-alert {
                width: 100%;
                left: 0;
                transform: none;
                margin-top: 0;
            }
        }
        
       #overlay {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background-color: rgba(255, 255, 255, 0.7);
         display: flex;
         align-items: center;
         justify-content: center;
         z-index: 9999;
       }
       
       .loader {
         position: relative;
         width: 120px;
         height: 120px;
       }
       
       .circle {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         border: 10px solid #f3f3f3;
         border-top: 10px solid #3498db;
         border-radius: 50%;
         animation: spin 1s linear infinite;
       }
       
       .loader img {
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         width: 105px;
         height: 105px;
         border-radius: 50%;
       }
        @@keyframes spin {
          0% { transform: rotate(0deg);}
          50%{border-top: 10px solid orange;}
          100% { transform: rotate(360deg); }
        }
        
        /* Hide overlay and loader when content is loaded */
        .loaded {
          display: none !important;
        }
        
        /* 设置滚动条的宽度 */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        ::-webkit-scrollbar-thumb {
            border-radius: 4px;
            background-color: #c0c4cc;
        }
    </style>
</head>
<body>
<header id="vue-header">
    <div class="px-3 py-2 bg-dark text-white">
        <div class="container">
            <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
                <a class="d-flex align-items-center my-2 my-lg-0 me-lg-auto text-white text-decoration-none"
                   asp-controller="Home" asp-action="Index">
                    <img src="~/images/logo4.jpg" class="round-icon animated-icon" alt="">
                </a>

                <ul class="nav col-12 col-lg-auto pt-1 my-2 justify-content-center my-md-0 text-small">
                    <li>
                        <a class="nav-link text-white" href="@Url.Action("Index", "Home")">
                            <div class="bi d-block mx-auto mb-1 text-center">
                                @*<i class="bi bi-house-door-fill" style="font-size:25px"></i>*@
                                <i class="fa-solid fa-house fa-2xl"></i>
                            </div>
                            Home
                        </a>
                    </li>
                    <li>
                        <a class="nav-link text-white" href="@Url.Action("List", "Blog")">
                            <div class="bi d-block mx-auto mb-1 text-center">
                                <i class="fa-solid fa-table-list fa-2xl"></i>
                            </div>
                            Blog
                        </a>
                    </li>
                    <li>
                        <a class="nav-link text-white" asp-controller="Photo" asp-action="Index">
                            <div class="bi d-block mx-auto mb-1 text-center">
                                <i class="fa-solid fa-images fa-2xl"></i>
                            </div>
                            Photos
                        </a>
                    </li>
                    <li>
                        <a class="nav-link text-white" asp-controller="About" asp-action="Index">
                            <div class="bi d-block mx-auto mb-1 text-center">
                                <i class="fa-solid fa-circle-info fa-2xl"></i>
                            </div>
                            About
                        </a>
                    </li>
                    <li>
                        <a class="nav-link text-white" asp-controller="LinkExchange" asp-action="Add">
                            <div class="bi d-block mx-auto mb-1 text-center">
                                <i class="fa-sharp fa-solid fa-link fa-2xl"></i>
                            </div>
                            Links
                        </a>
                    </li>
                    <li>
                        <a class="nav-link text-white" asp-controller="MsgBoard" asp-action="Index">
                            <div class="bi d-block mx-auto mb-1 text-center">
                                <i class="fa-solid fa-comments fa-2xl"></i>
                            </div>
                            Fprint
                        </a>
                    </li>
                    <li>
                        <a class="nav-link text-white" asp-controller="ArticleArc" asp-action="Index">
                            <div class="bi d-block mx-auto mb-1 text-center">
                                <i class="fa-solid fa-chart-column fa-2xl"></i>
                            </div>
                            STATS
                        </a>
                    </li>
                    <li>
                        <a class="nav-link text-white" asp-controller="Rss" asp-action="Index">
                            <div class="bi d-block mx-auto mb-1 text-center">
                                <i class="fa-solid fa-rss fa-2xl"></i>
                            </div>
                            RSS
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="px-3 py-2 border-bottom mb-3">
        <div class="container d-flex flex-wrap justify-content-center">
            <form class="col-12 col-lg-auto mb-2 mb-lg-0 me-lg-auto"
                  asp-controller="Search" asp-action="Blog">
                <input type="search" class="form-control" placeholder="搜索文章..." aria-label="Search" name="keyword">
            </form>

            <div class="text-end">
                <span class="dropdown me-2">
                    <button href="#" class="btn btn-light" id="play-pause-button" role="button">
                        <i class="bi bi-music-note-beamed"></i>
                        音乐
                    </button>
                </span>
                <span class="dropdown me-2">
                    <a href="#" class="btn btn-light" id="dropdown" role="button" onclick="stopp()">
                        <i class="bi bi-arrow-repeat"></i>
                        樱花
                    </a>
                </span>
                <span class="dropdown me-2">
                    <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                        Themes
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                        <li v-for="theme in themes">
                            <a v-if="theme.name===currentTheme" class="dropdown-item active">{{theme.name}}</a>
                            <a v-else class="dropdown-item" v-on:click="setTheme(theme.name)">{{theme.name}}</a>
                        </li>
                    </ul>
                </span>
                @* todo 登录注册功能后续再来 *@
                @* <button type="button" class="btn btn-light text-dark me-2">Login</button> *@
                @* <button type="button" class="btn btn-primary">Sign-up</button> *@
            </div>
        </div>
    </div>
</header>
<main id="vue-app">
    <div id="overlay">
        <div class="loader">
            <div class="circle"></div>
            <img src="https://pljzy.top/images/logo4.jpg" alt="加载动画">
        </div>
    </div>
    <div class="container mt-3">
        @while (!Messages.IsEmpty)
        {
            var message = Messages.Dequeue();
            <partial name="Widgets/Alert" model="message"/>
        }
    </div>
    <div id="HomeAlertPlaceholder" class="custom-alert">
    </div>
    @RenderBody()
</main>
<footer class="bg-dark">
    <div id="footer">
        <div class="container">
            <div class="row">
                <div id="footer-content" class="col-md-10 col-md-offset-3 footer-list text-center">
                    <p class="social-icons">
                        <a target="_blank" rel="nofollow" href="https://www.cnblogs.com/ZYPLJ/" style="text-decoration: none;">
                            <i class="fa-solid fa-blog"></i>
                        </a>
                        <a asp-controller="About" asp-action="Index" style="text-decoration: none;">
                            <i class="fab fa-weixin"></i>
                        </a>
                        <a target="_blank" rel="nofollow" href="https://github.com/ZyPLJ" style="text-decoration: none;">
                            <i class="fab fa-github"></i>
                        </a>
                        <a target="_blank" rel="nofollow" href="https://gitee.com/zyplj" style="text-decoration: none;">
                            <i class="bi bi-git"></i>
                        </a>
                    </p>

                    <p>
                        Copyright © @DateTime.Now.Year.ToString()
                        <a href="https://gitee.com/zyplj">ZY</a>. All Rights Reserved.
                    </p>
                    <p>
                        All content is released under
                        <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/deed.en" rel="external nofollow" target="_blank">
                            Creative Commons
                            BY-NC-SA 3.0
                        </a>.
                        <br>
                        If articles including programming codes (e.g. Java, Python, C#, Go) are exceptions, which are released under
                        <a href="http://www.gnu.org/licenses/gpl.html"
                           rel="external nofollow" target="_blank">
                            GPL
                            v3
                        </a>.
                    </p>
                    <p>
                        所有內容皆以<a href="http://creativecommons.org/licenses/by-nc-sa/3.0/deed.en" rel="external nofollow" target="_blank"> 知识共享署名-相同方式共享 4.0 国际许可协议 </a>进行发布。<br>
                        含有程序代码內容的文章 (如 Java, Python, C#, Go) 除外，包含的程序代码皆以 <a href="http://www.gnu.org/licenses/gpl.html" rel="external nofollow" target="_blank">GPL v3</a> 发布。
                    </p>
                    <p>
                        本站使用 <a href="https://github.com/ZyPLJ/personalblog">ZYBlog</a> 开源博客系统，
                        基于 <a href="https://dotnet.microsoft.com/zh-cn/">.NetCore</a> 技术构建
                    </p>
                    <p>
                        <span id="siteRunningTime" style="color:cornsilk">
                            网站运行时间：计算中...
                        </span>
                        &nbsp;&nbsp;
                        <a href="https://beian.miit.gov.cn">湘ICP备2023007264号-1</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</footer>
<script>
    // 监听按钮的点击事件
    document.querySelector('#button').addEventListener('click', () => {
      // 滚动页面到网站主要内容的位置
      document.querySelector('#main-content').scrollIntoView({ behavior: 'smooth' });
    });
  </script>
<script>
        !function (e, t, a) {
            function r() {
                for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[e].y--, s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x + "px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e].scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");
                requestAnimationFrame(r)
            }
            function n() {
                var t = "function" == typeof e.onclick && e.onclick;
                e.onclick = function (e) {
                    t && t(),
                        o(e)
                }
            }
            function o(e) {
                var a = t.createElement("div");
                a.className = "heart",
                    s.push({
                        el: a,
                        x: e.clientX - 5,
                        y: e.clientY - 5,
                        scale: 1,
                        alpha: 1,
                        color: c()
                    }),
                    t.body.appendChild(a)
            }
            function i(e) {
                var a = t.createElement("style");
                a.type = "text/css";
                try {
                    a.appendChild(t.createTextNode(e))
                } catch (t) {
                    a.styleSheet.cssText = e
                }
                t.getElementsByTagName("head")[0].appendChild(a)
            }
            function c() {
                return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
            }
            var s = [];
            e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame ||
                function (e) {
                    setTimeout(e, 1e3 / 60)
                },
                i(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),
                n(),
                r()
        }(window, document);
        let stop, staticx;
        const img = new Image();
        img.src = "";

        function Sakura(x, y, s, r, fn) {
            this.x = x;
            this.y = y;
            this.s = s;
            this.r = r;
            this.fn = fn;
        }

        Sakura.prototype.draw = function (cxt) {
            cxt.save();
            const xc = 40 * this.s / 4;
            cxt.translate(this.x, this.y);
            cxt.rotate(this.r);
            cxt.drawImage(img, 0, 0, 40 * this.s, 40 * this.s)
            cxt.restore();
        }

        Sakura.prototype.update = function () {
            this.x = this.fn.x(this.x, this.y);
            this.y = this.fn.y(this.y, this.y);
            this.r = this.fn.r(this.r);
            if (this.x > window.innerWidth || this.x < 0 || this.y > window.innerHeight || this.y < 0) {
                this.r = getRandom('fnr');
                if (Math.random() > 0.4) {
                    this.x = getRandom('x');
                    this.y = 0;
                    this.s = getRandom('s');
                    this.r = getRandom('r');
                } else {
                    this.x = window.innerWidth;
                    this.y = getRandom('y');
                    this.s = getRandom('s');
                    this.r = getRandom('r');
                }
            }
        }

        SakuraList = function () {
            this.list = [];
        }
        SakuraList.prototype.push = function (sakura) {
            this.list.push(sakura);
        }
        SakuraList.prototype.update = function () {
            let i = 0, len = this.list.length;
            for (; i < len; i++) {
                this.list[i].update();
            }
        }
        SakuraList.prototype.draw = function (cxt) {
            let i = 0, len = this.list.length;
            for (; i < len; i++) {
                this.list[i].draw(cxt);
            }
        }
        SakuraList.prototype.get = function (i) {
            return this.list[i];
        }
        SakuraList.prototype.size = function () {
            return this.list.length;
        }

        function getRandom(option) {
            let ret, random;
            switch (option) {
                case 'x':
                    ret = Math.random() * window.innerWidth;
                    break;
                case 'y':
                    ret = Math.random() * window.innerHeight;
                    break;
                case 's':
                    ret = Math.random();
                    break;
                case 'r':
                    ret = Math.random() * 6;
                    break;
                case 'fnx':
                    random = -0.5 + Math.random();
                    ret = function (x, y) {
                        return x + 0.5 * random - 1.7;
                    };
                    break;
                case 'fny':
                    random = 1.5 + Math.random() * 0.7
                    ret = function (x, y) {
                        return y + random;
                    };
                    break;
                case 'fnr':
                    random = Math.random() * 0.03;
                    ret = function (r) {
                        return r + random;
                    };
                    break;
            }
            return ret;
        }

        function startSakura() {

            requestAnimationFrame = window.requestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                window.oRequestAnimationFrame;
            let canvas = document.createElement('canvas'),
                cxt;
            staticx = true;
            canvas.height = window.innerHeight;
            canvas.width = window.innerWidth;
            canvas.setAttribute('style', 'position: fixed;left: 0;top: 0;pointer-events: none;');
            canvas.setAttribute('id', 'canvas_sakura');
            document.getElementsByTagName('body')[0].appendChild(canvas);
            cxt = canvas.getContext('2d');
            const sakuraList = new SakuraList();
            for (let i = 0; i < 50; i++) {
                let sakura, randomX, randomY, randomS, randomR, randomFnx, randomFny, randomFnR;
                randomX = getRandom('x');
                randomY = getRandom('y');
                randomR = getRandom('r');
                randomS = getRandom('s');
                randomFnx = getRandom('fnx');
                randomFny = getRandom('fny');
                randomFnR = getRandom('fnr');
                sakura = new Sakura(randomX, randomY, randomS, randomR, {
                    x: randomFnx,
                    y: randomFny,
                    r: randomFnR
                });
                sakura.draw(cxt);
                sakuraList.push(sakura);
            }
            stop = requestAnimationFrame(function () {
                cxt.clearRect(0, 0, canvas.width, canvas.height);
                sakuraList.update();
                sakuraList.draw(cxt);
                stop = requestAnimationFrame(arguments.callee);
            })
        }

        window.onresize = function () {
            const canvasSnow = document.getElementById('canvas_sakura');
            if (canvasSnow){
                canvasSnow.width = window.innerWidth;
                canvasSnow.height = window.innerHeight;
            }
        }

        img.onload = function () {
            //startSakura();
        }
        function stopp() {
            if (staticx) {
                const child = document.getElementById("canvas_sakura");
                child.parentNode.removeChild(child);
                window.cancelAnimationFrame(stop);
                staticx = false;
            } else {
                startSakura();
            }
        }
        function calculateTimeDifference(startDate) {
            const now = new Date();
            const timeDifference = now - startDate;
            const days = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
            const hours = now.getHours(); // 使用24小时制
            const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);

            return { days, hours, minutes, seconds };
        }

        function updateSiteRunningTime() {
            // 网站开始运行的日期（根据实际情况修改）
            const startDate1 = new Date("2023-04-08");

            // 计算运行时间
            const timeDifference1 = calculateTimeDifference(startDate1);

            // 更新显示网站运行时间的元素
            const runningTimeElement1 = document.getElementById("siteRunningTime");
            runningTimeElement1.textContent = `网站运行时间：${timeDifference1.days}天 ${timeDifference1.hours}时 ${timeDifference1.minutes}分 ${timeDifference1.seconds}秒`;
        }

        // 立即更新网站运行时间
        updateSiteRunningTime();

        // 每秒更新一次网站运行时间
        setInterval(updateSiteRunningTime, 1000);
        
    </script>
<script>
        var timerId;
       function showAlert(message, type) {
         const alertPlaceholder = document.getElementById('HomeAlertPlaceholder');
         const alertWrapper = document.createElement('div');
         alertWrapper.innerHTML = `
           <div class="alert alert-${type} alert-dismissible d-flex align-items-center" role="alert">
             <i class="fa fa-times-circle"></i>
                &nbsp;
             <div>
            ${message}
            </div>
             <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
           </div>
         `;
         alertPlaceholder.appendChild(alertWrapper);
       
         // 设置定时器，在一定时间后自动移除警告框
         clearTimeout(timerId);
         timerId = setTimeout(deleteAlert, 3000);
       }
       
       function deleteAlert() {
         const alertPlaceholder = document.getElementById('HomeAlertPlaceholder');
         while (alertPlaceholder.firstChild) {
           alertPlaceholder.removeChild(alertPlaceholder.firstChild);
         }
       }
</script>
<script>
    // 在页面开始加载时禁止滚动
    window.addEventListener('beforeunload', function() {
        document.body.style.overflow = 'hidden';
        window.addEventListener('scroll', noScroll);
    });
    function noScroll(event) {
        event.preventDefault();
    }
    window.addEventListener('load', function() {
      var overlay = document.getElementById('overlay');
      overlay.classList.add('loaded');
      document.body.style.overflow = 'auto';
      window.removeEventListener('scroll', noScroll);
    });
    
</script>
<script src="~/lib/site.js"></script>
@* <script src="https://unpkg.com/petite-vue@0.4.1/dist/petite-vue.iife.js"></script> *@
@await RenderSectionAsync("bottom", false)
</body>
</html>